<link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../lib/overlayscrollbars/styles/overlayscrollbars.min.css">
<link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="col-12 pt-2">
<!--            这里显示商品列表-->
<!--       themlyme模板显示     -->
<!--&lt;!&ndash;            <p th:text="${data}"></p>&ndash;&gt;-->
<!--            <div class="row text-center">-->
<!--                <div class="col-9"></div>-->
<!--                <div class="col-3">-->
<!--                    <a data-toggle="modal" data-target="#modalAdd" class="btn btn-danger">新增</a>-->
<!--                </div>-->
<!--            </div>-->
        <div class="row text-center">
            <div class="col-9"></div>
            <div class="col-3">
                <a data-toggle="modal" data-target="#modalAdd" class="btn btn-warning">新增</a>
            </div>
        </div>
            <table class="table table-bordered">
                <thead>
                  <th>序号</th>
                  <th>商品名</th>
                  <th>价格</th>
                  <th>数量</th>
                  <th>种类</th>
                  <th>供应商</th>
                  <th>操作</th>
                </thead>
                <tbody>

                  <tr th:each="goods:${data}">
                      <td th:text="${goods.getId()}" class="col-sm-auto col-form-label"></td>
                      <td th:text="${goods.getName()}" class="col-sm-auto col-form-label"></td>
                      <td th:text="${goods.getPrice()}" class="col-sm-auto col-form-label"></td>
                      <td th:text="${goods.getNumber()}" class="col-sm-auto col-form-label"></td>
                      <td th:text="${goods.getCategory()}" class="col-sm-auto col-form-label"></td>
                      <td th:text="${goods.getSupplier()}" class="col-sm-auto col-form-label"></td>
                      <td>
                          <button class="btn btn-info" th:onclick="del([[${goods.getId()}]])">删除</button>
                          <button data-toggle="modal" data-target="#modalUpdate" class="btn btn-dark"
                                  th:onclick="update([[${goods.getId()}]],[[${goods.getName()}]],[[${goods.getPrice()}]],
                                  [[${goods.getNumber()}]],[[${goods.getCategory()}]],[[${goods.getSupplier()}]])">
                              更新
                          </button>
<!--                          <button data-toggle="modal" data-target="#modalAdd" class="btn btn-danger">-->
<!--                              新增-->
<!--                          </button>-->
                      </td>
                  </tr>
                </tbody>
            </table>
        </div>
<!--   模态框测（Modal）-->
    <!-- 定义一个新增的子窗体模态框（Modal）HTML代码 -->
    <div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新增商品
                    </h4>
                </div>
                <div class="modal-body">
<!--                    新增表单区-->
                    <form method="post" action="/goods/goodsAddProcess">
                        <div class="form-control">
                            <label for="">商品名称</label>
                            <input type="text" name="name" id="">
                        </div>
                        <div class="form-control">
                            <label for="">商品价格</label>
                            <input type="text" name="price" id="">
                        </div>
                        <div class="form-control">
                            <label for="">商品数量</label>
                            <input type="text" name="number" id="">
                        </div>
                        <div class="form-control">
                            <label for="">商品种类</label>
                            <input type="text" name="category" id="">
                        </div>
                        <div class="form-control">
                            <label for="">商品供应商</label>
                            <input type="text" name="supplier" id="">
                        </div>
                        <div class="form-control">
                            <input type="submit" value="提交" class="btn btn-primary">
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
<!--    定义更新子窗体模态框代码区-->
    <div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">更新商品</h4>
                </div>
                <div class="modal-body">
                    <div class="form-control">
                        <label for="">序号</label>
                        <input type="text" name="id" id="Id" disabled="disabled">
                    </div>
                    <div class="form-control">
                        <label for="">名称</label>
                        <input type="text" name="name" id="name">
                    </div>
                    <div class="form-control">
                        <label for="">价格</label>
                        <input type="text" name="price" id="price">
                    </div>
                    <div class="form-control">
                        <label for="">数量</label>
                        <input type="text" name="number" id="number">
                    </div>
                    <div class="form-control">
                        <label for="">种类</label>
                        <input type="text" name="category" id="category">
                    </div>
                    <div class="form-control">
                        <label for="">供应商</label>
                        <input type="text" name="supplier" id="supplier">
                    </div>
                    <div class="form-control">
                        <button class="btn btn-danger" id="btnUpdate">更新</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
<!--    删除函数方法-->
function del(id){
//     确认是否删除
    var flag = confirm("是否删除该条记录");
    if (flag==true){
    //     使用ajax传递参数的方法交给后端去做处理
        $.post("/api/goodsDelete",{'id':id},function (res){
            console.log(res)
            if (res==1){
                alert("删除成功");
                location.reload();
            }else{
                alert("删除失败");
            }
        })
    }
}

// 更新
function update(id,name,price,number,category,supplier){
//     肯定有了这个商品信息，包括商品的所有字段
    console.log(id,name,price,number)
//     单独去给更新代码块的表单value赋值
    $('#Id').val(id);
    $('#name').val(name);
    $('#price').val(price);
    $('#number').val(number);
    $('#category').val(category);
    $('#supplier').val(supplier);
//     去使用ajax方式提交处理
}
// 提交更新处理
$('#btnUpdate').click(function () {
    var flag = confirm("确认提交更新？")
    if (flag == true) {
        $.post("/api/goodsUpdateProcess", {
            "id": $('#Id').val(), "name": $('#name').val(), "price": $('#price').val(),
            "number": $('#number').val(), "category": $('#category').val(), "supplier": $('#supplier').val()
        }, function (res) {
            if (res == 1) {
                alert("更新OK");
                location.href = "/goods/goodsList"
            } else {
                alert("更新失败");
            }
        })
    }
})
</script>